import React from 'react';
import { Row, Col, Checkbox, Radio, Button, Spin, Popover } from 'antd';
import { WeaLocaleProvider, WeaTextarea, WeaSelect, WeaInput } from 'ecCom';
import { observer, inject } from 'mobx-react';
import PopoverContent from './PopoverCont';
import _ from 'lodash';

const getLabel = WeaLocaleProvider.getLabel;
const RadioGroup = Radio.Group;
const CheckStatus = {
	CHECK: '1',
	UNCHECK: '0',
};
const variables = [
	{ name: '应用名称', value: 'appname' },
	{ name: '填写人', value: 'curruser' },
	{ name: '填写时间', value: 'currtime' },
	{ name: '填写人部门', value: 'currdept' },
];

@inject('edcFormReplyStore')
@observer
export default class Reply extends React.Component {
	textarea = React.createRef();
	input = React.createRef();

	constructor(props) {
		super(props);

		this.store = props.edcFormReplyStore;
		this.store.init(props.appid);

		this.state = {
			isSaving: false,
			popoverVisible: false,
		};
 	}

	setValueToTextarea(textarea, key, val) {
		const { selectionStart, selectionEnd } = textarea;

		if (document.selection) {
			const sel = document.selection.createRange();

			sel.text = key;
		} else if (_.isNumber(selectionStart) && _.isNumber(selectionEnd)) {
			val = val.substring(0, selectionStart) + key + val.substring(selectionEnd, val.length);
			setTimeout(() => {
				textarea.selectionStart = textarea.selectionEnd = selectionStart + key.length;
			});
		} else {
			val += key;
		}
			textarea.focus();

		return val;
	}

	insert = (value) => {
		const Input = this.textarea.current.refs.textareaNormal.refs.input.refs.input;

		if (Input && value) {
			const val = this.setValueToTextarea(Input, value, Input.value); // 插入字段之后的值

			this.onChange('msgRemark')(val);
		}
	}

	insertTitle = (value) => {
		const Input = this.input.current.refs.inputNormal.refs.input.refs.input;

		if (Input && value) {
			const val = this.setValueToTextarea(Input, value, Input.value); // 插入字段之后的值

			this.onChange('msgTitle')(val);
		}
	}


	onChange = key => (value) => {
		const { onChange } = this.store;

		if (key === 'enabled') {
      		value = value ? CheckStatus.CHECK : CheckStatus.UNCHECK;
		}

		onChange(key, value);
	}

	onSave = () => {
		const { onSave } = this.store;

		this.setState({ isSaving: true });

		onSave().then(() => {
			this.setState({ isSaving: false });
		});
	}

  	render() {
		const { hasInit, isSaving, replyInfo } = this.store;
		const { popoverVisible } = this.state;
		const checkStatus = replyInfo.enabled === CheckStatus.CHECK;

		return (
			<Spin ecId={`${this && this.props && this.props.ecId || ''}_Spin@gxw0zl`} spinning={!hasInit}>
				<div className="wea-receipt">
					<Row ecId={`${this && this.props && this.props.ecId || ''}_Row@4ikq92`}>
						<Col ecId={`${this && this.props && this.props.ecId || ''}_Col@lzdue8`} span={3}>{getLabel(526525, '启用回执')}：</Col>
						<Col ecId={`${this && this.props && this.props.ecId || ''}_Col@vdtj2a`} span={20}>
							<Checkbox ecId={`${this && this.props && this.props.ecId || ''}_Checkbox@8wfeku`}
  checked={checkStatus}
  onChange={e => this.onChange('enabled')(e.target.checked)}
							/>
						</Col>
					</Row>
					{
						checkStatus ?
							<React.Fragment ecId={`${this && this.props && this.props.ecId || ''}_Fragment@kzdwfc`}>
							<Row ecId={`${this && this.props && this.props.ecId || ''}_Row@n7ryji`}>
								<Col ecId={`${this && this.props && this.props.ecId || ''}_Col@al2yac`} span={3}>{getLabel(526526, '回执消息类型')}:</Col>
								<Col ecId={`${this && this.props && this.props.ecId || ''}_Col@8qtzcr`} span={20}>
									<RadioGroup ecId={`${this && this.props && this.props.ecId || ''}_RadioGroup@kyjwpx`}
										value={replyInfo.msgType}
										onChange={e => this.onChange('msgType')(e.target.value)}
									>
										<Radio ecId={`${this && this.props && this.props.ecId || ''}_Radio@b1ebok`} value="USER_MSG">{getLabel(526527, '用户消息回执')}</Radio>
										<Radio ecId={`${this && this.props && this.props.ecId || ''}_Radio@kuh3y4`} value="SYSTEM_MSG" disabled>{getLabel(526528, '系统消息回执')}</Radio>
									</RadioGroup>
								</Col>
							</Row>
							<Row ecId={`${this && this.props && this.props.ecId || ''}_Row@sk57d1`}>
								<Col ecId={`${this && this.props && this.props.ecId || ''}_Col@w72ae9`} span={3}>{getLabel(526529, '消息标题')}：</Col>
								<Col ecId={`${this && this.props && this.props.ecId || ''}_Col@ito51p`} span={20}>
									<div className="title">
										<WeaInput ecId={`${this && this.props && this.props.ecId || ''}_WeaInput@i1s4tq`}
  value={replyInfo.msgTitle}
  onChange={this.onChange('msgTitle')}
  ref={this.input}
										/>
										<Popover ecId={`${this && this.props && this.props.ecId || ''}_Popover@xaaize`}
  content={<PopoverContent ecId={`${this && this.props && this.props.ecId || ''}_PopoverContent@ybuwzb`} insert={this.insertTitle} visible={popoverVisible} />}
  trigger="hover"
  overlayClassName="wea-edc-insert wea-edc-replay-title-insert"
  placement="bottom"
  onVisibleChange={visible => this.setState({ popoverVisible: visible })}
										>
											<Button ecId={`${this && this.props && this.props.ecId || ''}_Button@wpsi8h`}>{getLabel(526530, '插入变量')}</Button>
										</Popover>
									</div>
								</Col>
							</Row>
							<Row ecId={`${this && this.props && this.props.ecId || ''}_Row@sasp03`}>
								<Col ecId={`${this && this.props && this.props.ecId || ''}_Col@6x273m`} span={3}>{getLabel(526531, '消息描述')}：</Col>
								<Col ecId={`${this && this.props && this.props.ecId || ''}_Col@wr7dz8`} span={20}>
									<div className="select-com">
										<WeaTextarea ecId={`${this && this.props && this.props.ecId || ''}_WeaTextarea@25vc52`}
  minRows={6}
  maxRows={6}
  ref={this.textarea}
  value={replyInfo.msgRemark}
  onChange={this.onChange('msgRemark')}
										/>
										<Popover ecId={`${this && this.props && this.props.ecId || ''}_Popover@40n9ft`}
  content={<PopoverContent ecId={`${this && this.props && this.props.ecId || ''}_PopoverContent@ls4bpl`} insert={this.insert} visible={popoverVisible} />}
  trigger="hover"
  overlayClassName="wea-edc-insert"
  placement="bottom"
  onVisibleChange={visible => this.setState({ popoverVisible: visible })}
										>
											<Button ecId={`${this && this.props && this.props.ecId || ''}_Button@ngx5v0`}>{getLabel(526530, '插入变量')}</Button>
										</Popover>
									</div>
								</Col>
							</Row>
						</React.Fragment> : null
					}
					<Row ecId={`${this && this.props && this.props.ecId || ''}_Row@f76spm`}>
						<div className="relation-btn">
						<Button ecId={`${this && this.props && this.props.ecId || ''}_Button@3879qn`} type="primary"
  icon={isSaving && 'loading'}
  onClick={this.onSave}
						>
							{getLabel(86, '保存')}
						</Button>
						</div>
					</Row>
				</div>
			</Spin>
    	);
  	}
}
